Navigering i det immersive landskab: Klassificering af WebXR-inputkilder og detektering af controllertyper

Verdenen af Extended Reality (XR), som omfatter Virtual Reality (VR) og Augmented Reality (AR), udvikler sig hastigt. I takt med at udviklere stræber efter at skabe mere intuitive og engagerende immersive oplevelser, bliver det afgørende at forstå og effektivt håndtere brugerinput. WebXR, standarden for at levere XR-indhold direkte gennem webbrowsere, tilbyder kraftfulde værktøjer til dette. Et kritisk aspekt ved at bygge robuste WebXR-applikationer er evnen til at klassificere inputkilder og detektere controllertyper. Dette muliggør skræddersyede interaktioner, forbedret tilgængelighed og en mere ensartet brugeroplevelse på tværs af et bredt udvalg af hardware.

Vigtigheden af klassificering af inputkilder

I et immersivt miljø formidles en brugers interaktion gennem forskellige inputenheder. Disse kan variere fra simpel blikbaseret markering til sofistikerede trackede controllere, håndbevægelser eller endda kropsbevægelser. For at en WebXR-applikation kan reagere passende og naturligt, skal den forstå hvilken slags input der gives. Det er her, klassificering af inputkilder kommer ind i billedet.

Hvorfor er denne klassificering så afgørende for et globalt publikum?

• Hardware-diversitet: XR-markedet er oversvømmet med enheder fra talrige producenter på tværs af forskellige prisniveauer og formfaktorer. En global applikation skal kunne håndtere denne heterogenitet elegant. For eksempel vil en VR-oplevelse designet til high-end PC VR-headsets som Valve Index have andre inputmuligheder end en, der er rettet mod et selvstændigt mobilt VR-headset som Meta Quest, eller en AR-enhed som Magic Leap eller en smartphone, der kører ARKit/ARCore.
• Brugerforventninger: Brugere forventer, at deres valgte XR-enhed opfører sig forudsigeligt i en applikation. Hvis et tryk på en knap på deres controller ikke udfører den forventede handling på grund af en fejlfortolkning af inputtet, fører det til frustration og kan hurtigt fjerne dem fra oplevelsen.
• Tilgængelighed: Forskellige inputmetoder imødekommer forskellige brugerbehov og -evner. Klassificering af input giver udviklere mulighed for at tilbyde alternative interaktionsmetoder, hvilket sikrer, at flere mennesker kan få adgang til og nyde deres immersive indhold. For eksempel kan brugere med begrænset håndmobilitet være mere afhængige af blik- eller stemmeinput.
• Ydeevneoptimering: At kende inputkildens kapabiliteter kan informere optimeringsstrategier. For eksempel kan kompleks håndsporing kræve mere processorkraft end en simpel gamepad.
• Platformskonsistens: Selvom WebXR sigter mod en samlet API, kan de underliggende hardwareimplementeringer variere. Robust klassificering hjælper med at bygge bro over disse forskelle og opretholde en vis grad af konsistens.

Forståelse af WebXR-inputkilder

WebXR Device API'en giver mekanismer til at få adgang til information om tilsluttede inputenheder. Den primære måde at interagere med disse er gennem XRInputSource-objektet, som repræsenterer en enkelt inputkilde tilsluttet XR-sessionen. Et XRInputSource-objekt giver information om:

• Målstråle (Target Ray): Retningen, som inputkilden peger i.
• Greb (Grip): Positionen af inputkilden i rummet, som ofte repræsenterer, hvor en virtuel hånd ville holde en controller.
• Profiler (Profiles): En streng eller et array af strenge, der beskriver inputkildens kapabiliteter og forventede adfærd.
• Håndethed (Handedness): Om inputkilden er beregnet til venstre eller højre hånd.
• Funktioner (Features): Specifikke tilgængelige inputfunktioner, såsom knapper, thumbsticks eller touchpads.

XRInputSource.profiles-egenskaben: Nøglen til klassificering

profiles-egenskaben er uden tvivl det mest kraftfulde værktøj til at klassificere inputkilder. Det er et array af strenge, som leverandører bruger til at angive typen og kapabiliteterne af inputenheden. Disse profiler er standardiseret af Khronos Groups Extensible XR Input Profile-specifikation, med det formål at skabe et fælles sprog til at beskrive XR-inputenheder.

Eksempler på almindelige profiler:

• 'generic-hand': Indikerer en generel inputkilde til håndsporing.
• 'google-daydream-controller': Specifikt for Google Daydream-controlleren.
• 'htc-vive-controller': For HTC Vive-controllere.
• 'oculus-touch-controller': For Oculus (nu Meta) Touch-controllere.
• 'microsoft-mixed-reality-controller': For Windows Mixed Reality-controllere.
• 'microsoft-edge-motion-controller': For motion-controllere forbundet med Microsoft Edge.
• 'vive-tracker': For HTC Vive Trackers.
• 'keyboard': Repræsenterer tastaturinput.
• 'mouse': Repræsenterer museinput.

Ved at tjekke disse profilstrenge kan udviklere bestemme controllertypen og skræddersy deres applikations logik derefter.

Detektering af controllertyper: Praktiske tilgange

Kernen i detektering af controllertyper ligger i at iterere gennem de tilsluttede XRInputSource-objekter inden for en aktiv XR-session og undersøge deres profiles-egenskab.

Trin-for-trin detekteringslogik

1. Få en XR-session: Først skal du have en aktiv XRSession. Dette opnås typisk, efter at en bruger anmoder om en XR-session, og den er startet succesfuldt.

               
       navigator.xr.requestSession('immersive-vr').then(session => {
           // Session startet, nu kan vi tilgå inputkilder
           session.addEventListener('inputsourceschange', handleInputSourcesChange);
           handleInputSourcesChange({ session }); // Indledende tjek
       });
       
               
   
                 
                   Copy
                 
               
             

2. Få adgang til inputkilder: session.inputSources-egenskaben giver et array af alle tilsluttede XRInputSource-objekter.

               
       function handleInputSourcesChange(event) {
           const session = event.session;
           const inputSources = session.inputSources;
   
           inputSources.forEach(inputSource => {
               // Klassificer hver inputSource her
               classifyInputSource(inputSource);
           });
       }
       
               
   
                 
                   Copy
                 
               
             

3. Iterer og klassificer: I din klassificeringsfunktion skal du loope gennem profiles-arrayet for hver XRInputSource.

               
       function classifyInputSource(inputSource) {
           console.log('Input Source Profiles:', inputSource.profiles);
   
           if (inputSource.profiles.includes('oculus-touch-controller')) {
               console.log('Detected Oculus Touch Controller!');
               // Anvend Oculus Touch-specifik logik
               handleOculusTouch(inputSource);
           } else if (inputSource.profiles.includes('htc-vive-controller')) {
               console.log('Detected HTC Vive Controller!');
               // Anvend HTC Vive-specifik logik
               handleViveController(inputSource);
           } else if (inputSource.profiles.includes('generic-hand')) {
               console.log('Detected Hand Tracking!');
               // Anvend håndsporings-specifik logik
               handleHandTracking(inputSource);
           } else if (inputSource.profiles.includes('mouse') || inputSource.profiles.includes('keyboard')) {
               console.log('Detected 2D Input (Mouse/Keyboard)');
               // Anvend 2D-inputlogik
               handle2DInput(inputSource);
           }
           // Tilføj flere else if-betingelser for andre profiler
       }
       
               
   
                 
                   Copy
                 
               
             

4. Håndter input-hændelser: Når du har identificeret controllertypen, kan du lytte efter specifikke input-hændelser (f.eks. knaptryk, thumbstick-bevægelser) og mappe dem til din applikations handlinger. input-hændelsen på XRSession er et godt sted at starte, men specifikke controllere kan have deres egne event listeners eller kræve polling.

               
       session.addEventListener('selectstart', (event) => {
           if (event.inputSource.profiles.includes('oculus-touch-controller')) {
               console.log('Oculus Touch Trigger Pressed!');
               // Udløs specifik handling for Oculus Touch
           }
       });
       
               
   
                 
                   Copy
                 
               
             

Håndtering af manglende eller generiske profiler

Ikke alle XR-enheder afslører nødvendigvis meget specifikke profiler. I sådanne tilfælde kan du støde på mere generiske profiler som 'generic-xr-controller' eller slet ingen profiler. Her er fallback-strategier essentielle:

• Fallback til Gamepad API: Hvis XRInputSource afslører en gamepad-egenskab, kan du falde tilbage på standard Gamepad API. Dette giver en mere universel måde at få adgang til knaptryk og akseværdier, selvom den nøjagtige controllermodel ikke er eksplicit identificeret af en profil. WebXR API'en bygger i bund og grund bro til Gamepad API'en for XR-kontekster.
• Standardinteraktioner: For helt ukendte inputkilder, eller for enheder uden dedikerede controllere (som simple VR-viewere), kan du være nødt til at implementere standardinteraktioner. Dette kan være blikbaseret markering, en simpel knap på headsettet, eller endda at kræve, at brugeren tilslutter en kompatibel gamepad.
• Brugerprompter: I tvetydige situationer er det ofte bedst at spørge brugeren. For eksempel, hvis en generisk controller detekteres, kan du spørge: "Er dette en motion controller eller en gamepad?" Dette giver brugeren magt til at guide applikationens input-mapping.

Avanceret klassificering og overvejelser

Selvom profilstrenge er den primære mekanisme, er der andre faktorer at overveje for en omfattende WebXR-inputstrategi:

1. Håndsporing vs. Controllersporing

At skelne mellem håndsporing (f.eks. 'generic-hand') og sporing af fysiske controllere er afgørende. Håndsporing tilbyder en mere naturalistisk, controller-fri interaktion, men dens præcision og sporingskvalitet kan variere. Controllersporing, selvom den er mindre naturlig, giver ofte mere præcist og konsistent input til handlinger, der kræver finmotorik.

Eksempel: I en VR-applikation, der lader brugere tegne, ville du bruge håndsporing til frihåndstegninger. Men til præcis objektmanipulation eller aktivering af knapper, kan en controller være at foretrække. Din klassificeringslogik bør muliggøre skift mellem disse tilstande eller bruge dem kontekstuelt.

2. Inputkildens funktioner

Ud over blot typen kan en undersøgelse af de tilgængelige funktioner på en XRInputSource forfine din klassificering og interaktionsdesign. Mens profiles giver et overordnet hint, er det mere robust at tjekke for specifikke kapabiliteter.

• Knapper: Har den trigger-knapper, greb-knapper, menu-knapper?
• Akser: Har den thumbsticks eller touchpads, der giver analogt input?
• Sensorer: Har den haptiske feedback-muligheder?

WebXR Input Profiles-specifikationen definerer et fælles ordforråd for disse funktioner (f.eks. 'trigger', 'squeeze', 'thumbstick', 'touchpad', 'button'). Du kan tjekke for tilstedeværelsen af disse funktioner.

Bemærk: At tjekke for funktioner direkte kan kræve mere direkte interaktion med den underliggende XR-runtime eller en polyfill, hvis API'en ikke afslører dem direkte på en universelt bekvem måde. Dog korrelerer profiles ofte stærkt med tilgængelige funktioner.

3. Håndethed

inputSource.handedness-egenskaben ('left' eller 'right') er afgørende for korrekt at orientere virtuelle hænder eller tildele venstrehåndskontroller. Dette er ligetil, men essentielt for en behagelig oplevelse.

4. Målstråle-tilstand (Target Ray Mode)

inputSource.targetRayMode-egenskaben kan enten være 'gaze' eller 'pointing'. Dette fortæller dig, hvordan inputtet bliver rettet:

• 'gaze': Inputtet styres af, hvor brugeren kigger hen. Dette er almindeligt i VR-oplevelser kun med headset eller for visse AR-interaktioner.
• 'pointing': Inputtet styres af en fysisk controller eller en sporet hånd. Dette er den mere almindelige tilstand for controllere.

At forstå dette hjælper med at bestemme den passende interaktionsmetafor. For 'gaze' kan du bruge en markør, der følger brugerens blik. For 'pointing' stammer strålen fra controlleren eller hånden.

5. Globalisering af input-mapping

profiles tilbyder et udgangspunkt, men ægte globalt applikationsdesign kræver, at disse standardiserede profiler mappes til brugercentrerede interaktioner. Overvej:

• Konventioner for knap-mapping: Selvom profiler antyder knappetyper (f.eks. 'trigger'), kan den nøjagtige handling (f.eks. skyd, vælg, grib) have brug for at være konfigurerbar eller følge almindelige konventioner for forskellige regioner eller applikationsgenrer. For eksempel kan den primære handlingsknap i mange vestlige spil være på højre controller, men dette er ikke universelt sandt.
• Sprog og ikoner: Sørg for, at alle UI-elementer relateret til kontroller er lokaliseret. Ikoner er generelt mere universelle, men tekstetiketter skal oversættes.
• Profiler for input-tilgængelighed: Overvej at udvide din klassificering til at identificere inputkilder, der kan være en del af tilgængelighedsløsninger, såsom specialiserede adaptive controllere. Selvom WebXRs nuværende profilsystem måske ikke eksplicit imødekommer enhver niche-tilgængelighedsenhed, er et fleksibelt system, der kan udvides, en fordel.

Eksempel: Opbygning af en multi-controller applikation

Lad os se på et forenklet eksempel på en WebXR-applikation designet til at fungere med både Oculus Touch-controllere og håndsporing, der viser forskellige UI-elementer eller kontroller baseret på den detekterede inputkilde.

Scenarie: En VR-applikation, der lader brugere interagere med 3D-objekter. Når man bruger Oculus Touch-controllere, kan brugere gribe objekter med greb-knappen og pege med triggeren. Når man bruger håndsporing, kan brugere gribe med en knibebevægelse og interagere med UI-elementer ved at pege.

            
let session = null;
let controllers = {}; // Til at gemme inputkilder efter deres ID

function setupXR() {
    navigator.xr.requestSession('immersive-vr').then(xrSession => {
        session = xrSession;
        session.addEventListener('inputsourceschange', handleInputSourcesChange);
        session.addEventListener('selectstart', handleSelectStart);
        session.addEventListener('squeezestart', handleSqueezeStart);
        session.addEventListener('end', () => {
            session = null;
            console.log('XR session ended.');
        });
        handleInputSourcesChange({ session: session }); // Indledende synkronisering
        console.log('XR session started.');
    }).catch(err => {
        console.error('Error requesting XR session:', err);
    });
}

function handleInputSourcesChange(event) {
    const inputSources = event.session.inputSources;
    
    // Ryd op i gamle controllere, der ikke længere er tilsluttet
    for (const id in controllers) {
        if (!inputSources.find(src => src.handedness === controllers[id].handedness)) {
            delete controllers[id];
            // Opdater eventuelt UI for at afspejle den afbrudte controller
            console.log(`Controller ${id} disconnected.`);
        }
    }

    // Behandl nye og eksisterende inputkilder
    inputSources.forEach(inputSource => {
        controllers[inputSource.gamepad.index] = inputSource; // Bruger gamepad-indeks som et stabilt ID
        classifyInputSource(inputSource);
    });
}

function classifyInputSource(inputSource) {
    console.log('Input Source ID:', inputSource.gamepad.index, 'Profiles:', inputSource.profiles);

    if (inputSource.profiles.includes('oculus-touch-controller')) {
        console.log(`Oculus Touch Controller (${inputSource.handedness}) detected.`);
        // Tildel specifikke handlers eller tilstande for Oculus Touch
        if (inputSource.handedness === 'left') {
            controllers[inputSource.gamepad.index].type = 'oculus_touch_left';
        } else {
            controllers[inputSource.gamepad.index].type = 'oculus_touch_right';
        }
    } else if (inputSource.profiles.includes('generic-hand')) {
        console.log(`Hand Tracking (${inputSource.handedness}) detected.`);
        controllers[inputSource.gamepad.index].type = 'hand_tracking';
        // Opdater eventuelt UI for at vise håndsporingsindikatorer
    } else {
        console.log(`Unknown controller type or generic gamepad (${inputSource.handedness}) detected.`);
        controllers[inputSource.gamepad.index].type = 'generic';
    }
}

function handleSelectStart(event) {
    const inputSource = controllers[event.inputSource.gamepad.index];
    if (!inputSource) return;

    console.log('Select Start on:', inputSource.type);

    switch(inputSource.type) {
        case 'oculus_touch_right': // Antager, at primær select er trigger for højre controller
            console.log('Oculus Touch Trigger pressed. Grabbing object or activating UI.');
            // Implementer gribe-/aktiveringslogik for Oculus Touch
            break;
        case 'hand_tracking':
            console.log('Hand Pinch detected. Interacting with UI.');
            // Implementer UI-interaktionslogik for håndsporings-pinch
            break;
        case 'generic':
            console.log('Generic controller select pressed.');
            // Fallback for generiske controllere
            break;
    }
}

function handleSqueezeStart(event) {
    const inputSource = controllers[event.inputSource.gamepad.index];
    if (!inputSource) return;

    console.log('Squeeze Start on:', inputSource.type);

    switch(inputSource.type) {
        case 'oculus_touch_left': // Antager, at greb er squeeze for venstre controller
            console.log('Oculus Touch Grip pressed. Grabbing object.');
            // Implementer gribelogik for Oculus Touch-greb
            break;
        case 'hand_tracking':
            console.log('Hand Grip (closed fist) detected. Grabbing object.');
            // Implementer gribelogik for håndsporing med lukket næve
            break;
        case 'generic':
            console.log('Generic controller squeeze pressed.');
            // Fallback for generiske controllere
            break;
    }
}

// Kald setupXR(), når din applikation er klar til at starte en XR-session.
// For eksempel ved et klik på en knap:
// document.getElementById('enter-vr-button').addEventListener('click', setupXR);

// Du skal også håndtere input-release-hændelser (selectend, squeezeend)
// og potentielt andre input-hændelser som bevægelse af thumbstick/touchpad.

            

              
                Copy
              
            
          

Udfordringer og fremtidige retninger

På trods af fremskridtene er der stadig udfordringer:

• Profilstandardisering: Selvom den forbedres, vokser listen over standardiserede profiler stadig, og leverandører kan implementere brugerdefinerede eller mindre beskrivende profiler.
• Enhedsemulering: Test på tværs af et bredt udvalg af enheder er vanskeligt. Emulatorer kan hjælpe, men de replikerer ikke perfekt den virkelige hardwares ydeevne og interaktionsnuancer.
• Forudsigelse af brugerens hensigt: Selv med nøjagtig klassificering kan det være komplekst at udlede brugerens præcise hensigt, især med de mange tilgængelige inputmetoder.
• Cross-platform-nuancer: WebXR sigter mod kompatibilitet på tværs af platforme, men forskelle i rendering pipelines, sporingsnøjagtighed og tilgængelige sensorer mellem platforme (f.eks. WebXR på mobil AR vs. PC VR) kan stadig føre til varierende oplevelser.

Fremtiden vil sandsynligvis se endnu mere sofistikerede inputmetoder dukke op, herunder avanceret haptik, øjesporing og helkropssporing integreret i WebXR-oplevelser. WebXR Input Profile-specifikationen vil fortsat udvikle sig for at imødekomme disse nye paradigmer.

Handlingsorienterede indsigter for udviklere

For at bygge effektive WebXR-applikationer, der henvender sig til et globalt publikum:

• Prioriter profiltjek: Brug altid inputSource.profiles som din primære metode til at identificere inputenheder.
• Implementer fallbacks: Design din applikation til at nedgradere eller tilpasse sig elegant, når specifikke profiler ikke detekteres, ved at bruge Gamepad API eller generiske interaktionsmodeller.
• Test grundigt: Test om muligt din applikation på så mange forskellige XR-enheder, som du kan få adgang til, på tværs af forskellige platforme og formfaktorer.
• Design med fleksibilitet for øje: Byg input-mapping-systemer, der er modulære og let kan udvides til at understøtte nye enheder eller brugerkonfigurerbare kontroller.
• Brugerfeedback er afgørende: Giv klare visuelle signaler til brugerne om, hvilket input der detekteres, og hvordan det mappes. Tillad brugerdefinerede tilpasninger, hvor det er relevant.
• Tænk på tilgængelighed fra starten: Overvej, hvordan forskellige inputmetoder kan tjene brugere med forskellige evner.
• Hold dig opdateret: Hold dig ajour med ændringer og tilføjelser til WebXR API'en og Input Profiles-specifikationen.

Konklusion

At mestre klassificering af WebXR-inputkilder og detektering af controllertyper er ikke blot en teknisk detalje; det er fundamentalt for at skabe inkluderende, intuitive og fornøjelige immersive oplevelser for et verdensomspændende publikum. Ved omhyggeligt at analysere inputprofiler, implementere robuste fallback-mekanismer og designe med fleksibilitet i tankerne, kan udviklere sikre, at deres WebXR-applikationer giver en problemfri og engagerende rejse for enhver bruger, uanset hvilken hardware de vælger at udforske metaverset med.